<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	<canvas id="mycanvas" width="1500" height="500"></canvas>
	<script src="js/numArray.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		function Ball(x,y,r){
			this.x=x;
			this.y=y;
			this.r=r;
			this.vx = (parseInt(Math.random()*15)+5)*(Math.random()>0.5?-1:1);
			this.vy = (parseInt(Math.random()*20)+5)*(Math.random()>0.5?-1:1);
			this.color="rgb("+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+")";
		}
		var canvas=document.getElementById("mycanvas");
		canvas.height=600;
		canvas.width=1500;
		if (canvas.getContext) {
			var ctx=canvas.getContext("2d");
		};
		var time;
		var balls=[];
			getTime();
		setInterval(function(){
			ctx.translate(-1080,0);
			ctx.clearRect(0,0,canvas.width,canvas.height);
			updateTime();
			getTime();
		},50);
		function drawNum(arrNum){
				for (var i = 0; i < arrNum.length; i++) {
				for (var k = 0; k < arrNum[i].length; k++) {
					if (arrNum[i][k]==1) {
						ctx.beginPath();
						ctx.arc(k*20+10,i*20+10,10,0,2*Math.PI);
						ctx.fillStyle="rgb("+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+")";
						ctx.fill();
					}
				}
			}
		}
		function updateTime(){
			var date = new Date();
			var hh=date.getHours();
			var mm=date.getMinutes();
			var ss=date.getSeconds();
			if (ss!=time.getSeconds()) {
				//添加爆破小球
				if (ss%10!=time.getSeconds()%10) {
					addBall(920,10,10,time.getSeconds()%10);
				}
				if (parseInt(ss/10)!=parseInt(time.getSeconds()/10)) {
					addBall(920,10,10,parseInt(time.getSeconds()/10));	
				}
			}
				drawBalls();
		}
		function drawBalls() {
				for(var i = 0; i < balls.length; i++) {
					ctx.beginPath();
					balls[i].x += balls[i].vx;
					balls[i].y += balls[i].vy;
					balls[i].vy += 9.8;
					if(balls[i].y >= canvas.height - balls[i].r) {
						balls[i].y = canvas.height - balls[i].r;
						balls[i].vy = -0.6 * balls[i].vy;
					}
					ctx.arc(balls[i].x, balls[i].y, balls[i].r, 0, 2 * Math.PI)
					ctx.fillStyle=balls[i].color;
					ctx.fill()
				}
			}
		function updateBall(){
		}
		function addBall(x,y,r,num){
			var nums=numbers[num];
			for (var i = 0; i < nums.length; i++) {
				for (var k = 0; k < nums[i].length; k++) {
					if (nums[i][k]==1) {
						balls.push(new Ball(x+k*2*r,y+i*2*r,r));
					}
				}
			}
		}
		function getTime(){
			 time = new Date();
			var hh=time.getHours();
			var mm=time.getMinutes();
			var ss=time.getSeconds();
			var timearr=[];
			timearr.push(parseInt(hh/10));	
			timearr.push(hh%10);
			timearr.push(10);
			timearr.push(parseInt(mm/10));	
			timearr.push(mm%10);
			timearr.push(10);
			timearr.push(parseInt(ss/10));	
			timearr.push(ss%10);
			drawtime(timearr);
		}
		function drawtime(timearr){
			ctx.fillStyle="black"
			for (var i = 0; i < timearr.length; i++) {
				drawNum(numbers[timearr[i]]);
				if (i==2||i==5) {
					ctx.translate(80,0)
				} else if (i==1||i==4){
					ctx.translate(140,0)
				}else{
					ctx.translate(160,0)
				}
			}
		}
	</script>
	</body>
</html>

